<template>
    <div class="show">
    <van-sticky :offset-top="0">
       <div style="background-color:white;overflow:hidden">
         <div class="box" >
            <div class="sp1" @click="router.go(-1)">
                <van-icon name="arrow-left"  size="1.5rem" />
            </div>
            <span style="font-size:1.2rem">{{type}}</span>
            <span>
                <van-icon name="ellipsis" size="2rem"/>
            </span>
        </div>
        <input type="text" class="int1" placeholder="搜索" @focus="router.push('/ss')"/>
       </div>
        </van-sticky>
        <nut-infinite-loading
      v-model="infinityValue"
      :has-more="hasMore"
      @load-more="loadMore"
    >
      <div class="box1" v-for="i in displayedSum" :key="i" @click="shopfrontinfo(i)">
        <div class="box2">
          <img
            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.8InsvK94GQ2nhzRViLbJWAHaE8?w=278&h=185&c=7&r=0&o=5&dpr=1.3&pid=1.7"
            alt=""
          />
        </div>
        <div class="box3">
          <p style="font-weight: 600; font-size: 16px">
            {{ i.name.slice(0, 10) + '...' }}
          </p>
          <p
            style="
              margin-top: 0.5rem;
              font-size: 14px;
              color: rgb(126, 126, 126);
            "
          >
            {{ i.postton.slice(0, 20) + '...' }}
          </p>
          <p style="margin-top: 0.7rem">
            <span
              ><van-icon name="location" color="orange" />
              {{ i.gl + '公里' }}</span
            >
            <span style="margin-left: 0.8rem"
              ><van-icon name="star" color="orange" /> {{ i.pj }}</span
            >
          </p>
        </div>
      </div>
    </nut-infinite-loading>
    </div>
</template>

<script setup>
   import axios from 'axios';
import { reactive,onMounted,ref} from 'vue';
   import {useRouter,useRoute} from "vue-router"
   const route = useRoute()
   const router = useRouter()
   const shopfrontinfo = (i) => {
  router.push({
    name: 'info',
    query: {
      data:JSON.stringify(i),
    },
  });
};
   const type = route.query.type
const list = reactive([
]);
const getlist = () => {
  axios
    .get('http://localhost:3000/jsb/gettype?type=' + type)
    .then((res) => {
      list.length = 0;
      list.push(...res.data.list);
      console.log('====================================');
      console.log(list);
      console.log('====================================');
      initializeData()
    });
};
onMounted(() => {
  getlist();
});
// 初始化数据
const displayedSum = ref([])
const sum = ref([]) // 存储所有获取的数据
const infinityValue = ref(false)
const hasMore = ref(true)
const num = ref(1)
const loadedCount = ref(4) // 已加载的数据数量
const fetchCount = ref(1) // 每次加载的数量
const fetchMoreData = (start, count) => { 
  console.log(list);
  return list.slice(start,start+count)
}
// 初始化数据
const initializeData = () => {
  console.log('====================================');
  console.log('初始化数据');
  console.log('====================================');
  const initialData = fetchMoreData(0, loadedCount.value)
  sum.value = initialData
  displayedSum.value = initialData
  console.log(displayedSum.value);
}

// 加载更多数据的函数
const loadMore = (done) => {
  setTimeout(() => {
    const newData = fetchMoreData(loadedCount.value, fetchCount.value)
    if (newData.length === 0) {
      hasMore.value = false
    } else {
      sum.value = [...sum.value, ...newData]
      displayedSum.value = sum.value
      loadedCount.value += fetchCount.value
    }
    infinityValue.value = false
  }, 1000)
}
</script>

<style lang="scss" scoped>
.box{
    width: 90vw;
    margin: 2rem auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .sp1{
      width: 3rem;
      height: 3rem;    
      border-radius: 50%;
      text-align: center;
      border: 1px solid rgb(212, 212, 212);
      line-height: 3.3rem;
    }
}
.int1 {
  width: 17rem;
  height: 3rem;
  background-color: rgb(255, 255, 255);
  line-height: 3rem;
  border-radius: 1rem;
  color: white;
  border: none;
  margin-left: 1.1rem;
  border: 1px solid rgb(212, 212, 212);
  background: url('/搜索.png') no-repeat left center;
  padding-left: 70px; /* 根据图片大小调整 */
  background-size: 40px; 
  background-position-x:10px;
  margin-bottom: 1rem;
}
.box1{
    display: flex;
    height: 100%;
    width: 21rem;
    height: 7rem;
    margin: 2rem auto;
    justify-content: space-between;
    background-color: white;
}
.box2{
    width: 30%;
    height: 80%;
    margin-top: 0.7rem;
    margin-left: 0.5rem;
    img{
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }
}
.box3{
    width: 60%;
    height: 80%;
    margin-top: 0.7rem;
    
}
.show{
    width: 100vw;
    background-color: rgb(246, 246, 246);
    overflow: hidden;
}
*{
    margin: 0;
    padding: 0;
}

</style>